<template>
	<view>
		<uni-section title="操作区域" sub-title="仅有权操作「普通用户」,管理员账户由最高管理员统一管理" type="line">
			<view class="btns-view">
				<button type="primary" size="mini" @click="distributeRoleBtn">分配权限</button>
			</view>
		</uni-section>
		<uni-table stripe emptyText="暂无更多数据" type="selection" @selection-change="changeSelect">
			<uni-tr>
				<uni-th width="80" align="center">账号</uni-th>
				<uni-th width="120" align="center">用户名</uni-th>
				<uni-th width="50" align="center">权限</uni-th>
			</uni-tr>
			<uni-tr v-for="item in users">
				<uni-td align="center">{{item.username}}</uni-td>
				<uni-td align="center">
					<view>
						{{`${item.realname}(${item.isAdmin == 1? "管理员":"用户"})`}}
					</view>
					<view style="font-size: 25rpx;">{{item.email}}</view>
				</uni-td>
				<uni-td align="center" width="200">
					<text v-if="item.permissions == null">无</text>
					<uni-tag :text="item2" type="primary" size="mini" v-for="item2 in item.permissions.split(',')" v-else style="margin-right: 10rpx;border-radius: 10rpx;"></uni-tag>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-popup ref="distributeRolePopup" type="bottom">
			<view class="add-user-view">
				<uni-section title="权限分配" :sub-title="'注:您现在正在给「'+selectedUsersStr+'」分配权限！'" type="line">
					<view class="example">
						<uni-data-checkbox mode="tag" multiple v-model="selectCodeTypeList" :localdata="codeTypeList"></uni-data-checkbox>
					</view>
				</uni-section>
				<button type="primary" class="btn" @click="submit">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/common/apiUtil.js'
	export default {
		data() {
			return {
				baseUrl: api.SERVER_BASE,
				users: null,
				tempUserData: {},
				queryParams: {
					username: null,
					realname: null
				},
				addUserParams: {
					username: null,
					realname: null,
					email: null,
					password: null,
					isAdmin: 0
				},
				addUserRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入账号'
						}],
					},
					realname: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱'
						}]
					}
				},
				selectedUsers:[],
				selectedUsersStr:"",
				codeTypeList:[],
				selectCodeTypeList:[]
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.$get(api.GET_USER_LIST_ALL).then(res => {
					console.log(res)
					this.users = res.result
				})
			},
			distributeRoleBtn(){
				console.log(111)
				if(this.selectedUsers.length <= 0){
					uni.showToast({
						title: '您最少选择一个用户',
						icon: "none"
					});
					return;
				}
				this.openAddUserPopup()
			},
			changeSelect(e){
				console.log(e)
				// 定义选择的下标
				let selectedIndexes = e.detail.index;
				// 提取选中的用户信息
				this.selectedUsers = selectedIndexes.map(index => this.users[index]);
				console.log(this.selectedUsers)
				this.selectedUsersStr = this.selectedUsers.map(item => {
				    return item.username;
				}).join('、');
				console.log(this.selectedUsersStr)
			},
			openAddUserPopup() {
				this.$refs.distributeRolePopup.open("center");
				this.getCodeTypeList();
			},
			getCodeTypeList(){
				this.$get(api.GET_CODE_TYPE_LIST).then(res=>{
					console.log(res)
					const tempArr = []
					res.result.records.forEach(item=>{
						let temp = {
							text:item.name,
							value:item.id
						}
						tempArr.push(temp)
					})
					this.codeTypeList = tempArr
				})
			},
			submit(){
				let selectCodeTypeList = this.selectCodeTypeList;
				console.log(selectCodeTypeList)
				if(selectCodeTypeList.length <= 0){
					uni.showToast({
						title: '您至少需要选择一种类型',
						icon:"none"
					});
					return;
				}
				// 准备参数
				console.log(this.selectedUsers)
				let userIdList = this.selectedUsers.map(item => item.userId);
				
				const param = {
					userId:userIdList,
					typeId:this.selectCodeTypeList
				}
				console.log(param,"准备的参数")
				this.$post(api.BIND_USER_CODE_TYPE,param).then(res=>{
					console.log(res)
					uni.showToast({
						title: res.message,
						icon:"none"
					});
					this.$refs.distributeRolePopup.close();
					this.getData();
				})
			}
		}
	}
</script>

<style>
	.logoImage {
		width: 80rpx;
		height: 80rpx;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.add-user-view {
		background-color: #fff;
		width: 700rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.tag {
		border-radius: 10rpx !important;
		margin-left: 10rpx;
	}

	.btn {
		width: 350rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 30rpx auto;
	}
	.btns-view{
		padding: 20rpx;
	}
</style>